<template>
    <div>
      <el-row>
        <el-col :span="4" v-for="(o, index) in shopList" :key="index" :offset="index > 0 ? 2 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            <div style="padding: 14px;">
              <span>{{o.subject}}</span>
              <span>价格：{{o.total}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" @click="buy(o)" class="button">购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div v-html="alipayWap" ref="alipayWap"></div>

    </div>
</template>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        currentDate: new Date(),
        shopList:[{subject:"heitaoA",body:"今夜蓝爵",total:1000.0}
        ,{subject:"黑桃B",body:"今夜蓝爵",total:10000.0},
          {subject:"黑桃C",body:"今夜蓝爵",total:10000.0},
          {subject:"黑桃D",body:"今夜蓝爵",total:10000.0},
          {subject:"黑桃E",body:"今夜蓝爵",total:99999.0}],
        alipayWap:"",
      };
    },
    methods:{
      buy:function (o) {
        axios.post("api/pay",o).then(res=>{
          this.alipayWap=res.data;

          this.$nextTick(() => {
            //将form表单进行提交，请求支付宝
            this.$refs.alipayWap.children[0].submit()
          })
        })
      }
    }
  }
</script>

